<template>
	<!-- 用户卡片 -->
	<!--
	<view class="user-card">
		<view class="user-info-wrapper">
			<view class="user-avatar">
				<image src="/static/images/avatar/face.jpg" mode="aspectFill"></image>
			</view>
			<view class="user-details">
				<view class="user-name">Hi~ 奶茶爱好者</view>
				<view class="user-id">ID: 10086975</view>
			</view>
		</view>
		
		<view class="user-metrics">
			<view class="metric-item">
				<text class="metric-value">350</text>
				<text class="metric-label">积分</text>
			</view>
			<view class="metric-divider"></view>
			<view class="metric-item">
				<text class="metric-value">5</text>
				<text class="metric-label">优惠券</text>
			</view>
		</view>
	</view>
	-->
	
	<view class="user-card">
		<view class="user-info-wrapper">
			<view class="user-avatar">
				<image src="/static/images/avatar/face.jpg" mode="aspectFill"></image>
			</view>
			<view class="user-details">
				<view class="user-name">登录/注册</view>
				<view class="user-id">一键入会，解锁会员福利</view>
			</view>
		</view>	
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	@import "@/style/var.scss";

	/* 用户卡片 */
	.user-card {
		position: relative;
		margin: -40rpx 20rpx 30rpx 20rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		padding: 5rpx 0;
		display: flex;
		align-items: center;
	}

	.user-info-wrapper {
		padding: 25rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
		overflow: hidden;
		border: 4rpx solid rgba(200, 200, 200, 0.2);
		box-shadow: $uni-shadow-sm;
		transition: transform 0.3s ease;

		&:active {
			transform: scale(0.95);
		}
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
	}

	.user-details {
		flex: 1;
	}

	.user-name {
		font-size: $uni-font-size-base;
		font-weight: 600;
		color: $uni-text-color;
		margin-bottom: 10rpx;
		letter-spacing: 1rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
	}

	.user-id {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin-bottom: 5rpx;
	}

	// 按钮样式
	.vip-level {
		background: linear-gradient(135deg, #AB9158, #AB9158);
		color: $uni-text-color-inverse;
		border-radius: 40rpx;
		padding: 16rpx 40rpx;
		font-weight: 500;
		text-align: center;
		transition: transform 0.3s, box-shadow 0.3s;
	}

	.member-tag {
		display: inline-flex;
		align-items: center;
		border-radius: 30rpx;
		padding: 8rpx 30rpx;
		max-width: 300rpx;
		transition: transform 0.2s ease;

		&:active {
			transform: translateY(2rpx);
		}
	}

	.member-tag .icon-left {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.member-tag text {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-inverse;
		font-weight: 600;
	}

	.user-info {
		position: relative;
		margin: -40rpx 20rpx 30rpx 20rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		box-shadow: $box-shadow;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			&:nth-child(1):after {
				content: '';
				position: absolute;
				width: 1rpx;
				background-color: #ddd;
				right: 0;
				height: 100%;
				transform: scaleX(0.5) scaleY(0.8);
			}

			.icon {
				width: 84rpx;
				height: 84rpx;
				margin: 20rpx;
			}

			.title {
				font-size: 30rpx;
				color: $text-color-base;
				font-weight: 600;
			}
		}
	}

	/* 用户数据指标 */
	.user-metrics {
		margin-left: auto;
		display: flex;
		padding: 30rpx 0;
		background-color: $uni-bg-color;
		position: relative;
		z-index: 1;
	}

	.metric-item {
		flex: 1;
		display: flex;
		width: 100rpx;
		flex-direction: column;
		align-items: center;
		transition: transform 0.3s ease;

		&:active {
			transform: translateY(2rpx);
		}
	}

	.metric-divider {
		width: 1rpx;
		height: 70rpx;
		background-color: $uni-border-color;
		opacity: 0.6;
	}

	.metric-value {
		font-size: $uni-font-size-base;
		font-weight: 600;
		color: $uni-text-color;
		margin-bottom: 10rpx;
		letter-spacing: 1rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
	}

	.metric-label {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}
</style>